<template>
  <div class="header">
    <el-card class="box-card">
      <template #header>
        <div class="customerTitle1">
          <div v-if="route.query.path ==1 || route.query.path ==2">
            <span class="leve_title" >{{customerListInFo && customerListInFo.buyer_customer_name+'-'}}销售订单详情</span>
            <div class="add_order_font1">
              <span>需求编码：{{customerListInFo && customerListInFo.order_no}} </span>
              <span style="margin-left: 10px;margin-right: 10px">订单状态：{{customerListInFo && customerListInFo.status_str}} </span>
              <span>销售员：{{customerListInFo && customerListInFo.sales_dept_name }}部门-{{customerListInFo && customerListInFo.undertaker_name}} </span>
            </div>
          </div>
          <div v-if="route.query.path !=1 && route.query.path !=2">
            <span class="leve_title" >{{title(customerListInFo?.type)}}</span>
            <div class="add_order_font1">
              <span>总单号：{{customerListInFo && customerListInFo.uid}} </span>
              <span style="margin-left: 10px;margin-right: 10px">订单状态：
              {{customerListInFo && customerListInFo.status_str }}
              </span>
              <span>销售员：{{customerListInFo && customerListInFo.sales_dept_name}}部门-{{customerListInFo && customerListInFo.sales_user_name}} </span>
            </div>
          </div>
          <div>
            <el-button
              @click="back"
            >
              <!--              {{route.query.path != 5? route.query.path == 1 ? '取消承接' :'取消':'返回'}}-->
              返回
            </el-button>
          </div>
        </div>
      </template>
      <div>
        <VabStep :steps="route.query.path !=1&& route.query.path !=2 ? arr_approve1:arr_approve "/>
      </div>
    </el-card>
    <el-card>
      <template #header>
        <div class="customerTitle1">
          <span class="leve2_title leave3Title titleHead1">{{customerListInFo?.type == 2? '调拨出库信息': '销售出库信息'}}</span>
          <div >
            <el-button
              @click="refresh"
            >
              刷新
            </el-button>
            <el-button
              class="customerButton1"
              plain
              type="primary"
              @click="download"
            >
              下载
            </el-button>
          </div>
        </div>
      </template>
      <el-table
        highlight-current-row
        :load="loading"
        ref="singleTableRef"
        border
        :data="customer_order_list"
        height="300px"
        style="width: 100%"
        class="table_style1"
        @current-change="handleCurrentChange"
      >
        <el-table-column label="序号" align="center" width="80" fixed="left">
          <template #default="scope">
            <div class="table_style">
              <span style="margin-left: 5px"
                    v-text="(scope.$index + 1)"
              ></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单号" align="center" min-width="150" fixed="left">
          <template #default="scope">
            <span
              class="ellipsis"
            >
              {{ _FieldFormat(scope.row.uid,  '')}}
             </span>
          </template>
        </el-table-column>
        <el-table-column label="客户" align="center" min-width="170">
          <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.customer_name || '--'}}
             </span>
          </template>
        </el-table-column>
        <el-table-column label="销售组织" align="center" width="150">
          <template #default="scope">
              <span
                class="ellipsis"
              >
               {{scope.row.sales_org_name || '--'}}
             </span>
          </template>
        </el-table-column>
<!--        <el-table-column label="价目表" align="center" width="130">
          <template #default="scope">
              <span
                class="ellipsis"
              >
             {{scope.row.price_list_name || '&#45;&#45;'}}
             </span>
          </template>
        </el-table-column>-->
        <el-table-column label="销售数量" align="center" width="100">
          <template #default="scope">
              <span
                class="ellipsis numberMoney"
              >
              {{Number(scope.row.sales_num).toFixed(0)||'0'}}
             </span>
          </template>
        </el-table-column>
        <el-table-column label="出库数量" align="center" width="100">
          <template #default="scope">
              <span
                class="ellipsis numberMoney"
              >
              {{Number(scope.row.out_num).toFixed(0)||'0'}}
             </span>
          </template>
        </el-table-column>
        <el-table-column label="待出数量" align="center" width="130">
          <template #default="scope">
              <span
                class="ellipsis numberMoney"
              >
             {{Number(scope.row.wait_num).toFixed(0)||'0'}}
             </span>
          </template>
        </el-table-column>
        <el-table-column label="运输方式" align="center" width="110">
          <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.transport_type_str || '--'}}
             </span>
          </template>
        </el-table-column>
        <el-table-column label="费用结算" align="center" width="130">
          <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.payment_type == '1'?'运费到付':'运费预付'}}
             </span>
          </template>
        </el-table-column>
        <el-table-column label="收货地址" align="center" width="200">
          <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.shipping_address}}
              {{scope.row.address}}
             </span>
          </template>
        </el-table-column>
        <el-table-column label="收货联系人" align="center" width="110">
          <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.contact_user || '--'}}
             </span>
          </template>
        </el-table-column>
        <el-table-column label="联系电话" align="center" width="120">
          <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.contact_tel || '--'}}
             </span>
          </template>
        </el-table-column>
        <el-table-column label="销售员" align="center" width="120">
          <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.sales_user_name || '--'}}
             </span>
          </template>
        </el-table-column>
<!--        <el-table-column label="销售组织" align="center" width="120">-->
<!--          <template #default="scope">-->
<!--              <span-->
<!--                class="ellipsis"-->
<!--              >-->
<!--              {{scope.row.sales_org_name || '&#45;&#45;'}}-->
<!--             </span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="销售部门" align="center" width="120">
          <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.sales_dept_name || '--'}}
             </span>
          </template>
        </el-table-column>
<!--        <el-table-column label="销售组" align="center" width="120">-->
<!--          <template #default="scope">-->
<!--              <span-->
<!--                class="ellipsis"-->
<!--              >-->
<!--              {{scope.row.sales_group_name || '&#45;&#45;'}}-->
<!--             </span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="备注" align="center" width="150">
          <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.remark || '--'}}
             </span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card>
      <template #header>
        <div class="customerTitle1">
          <span class="leve2_title leave3Title titleHead1">产品信息<span class="title1"><span v-if="detailList" class="title2">订单号</span>{{detailList?.uid || ''}}</span></span>
        </div>
      </template>
      <div>
        <el-table
          :load="detailLoading"
          border
          :data="detailList && detailList.stock_out_detail"
          max-height="300px"
          style="width: 100%"
          class="table_style1"
        >
          <el-table-column label="序号" align="center" width="80" fixed="left">
            <template #default="scope">
              <div class="table_style">
                <span style="margin-left: 5px"
                      v-text="(scope.$index + 1)"
                ></span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="产品编码" align="center" fixed="left" min-width="120">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.goods_no || '--'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="产品名称" align="center" fixed="left" min-width="170">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.goods_name || '--'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column :label="customerListInFo?.type == 2?'出库通知单号':'出库单号'" align="center" width="150">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.delivery_order_id||'--'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="出库单号" align="center" width="150" v-if="customerListInFo?.type == 2">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.delivery_order_code||'--'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="条码" align="center" width="150">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.barcode || '--'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="仓库" align="center" width="120" v-if="customerListInFo && customerListInFo.type != 2">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.warehouse_name || '--'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="调出仓库" align="center" width="120" v-if="customerListInFo && customerListInFo.type == 2">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.warehouse_name || '--'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="调入仓库" align="center" width="120"  v-if="customerListInFo && customerListInFo.type == 2">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.consignment_warehouse_name || '--'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="单位" align="center" width="100">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.sales_unit || '--'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="出库数量" align="center" width="100">
            <template #default="scope">
              <span
                class="ellipsis numberMoney"
              >
              {{Number(scope.row.actual_qty).toFixed(0) || '0'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="批次号" align="center" width="120">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.batch_no || '--'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="生产日期" align="center" width="120">
            <template #default="scope">
              <span
                class="ellipsis"
              >
               {{ _FieldFormat(scope.row.product_date,  '')}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="有效期至" align="center" width="120">
            <template #default="scope">
              <span
                class="ellipsis"
              >
             {{ _FieldFormat(scope.row.expire_at,  '')}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="规格型号" align="center" width="100">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.spec_name || '--'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="品牌" align="center" width="100">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.brand_name || '--'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="产品类型" align="center" width="100">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.goods_type || '--'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="销售单位" align="center" width="100">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.sales_unit || '--'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="销售数量" align="center" width="100">
            <template #default="scope">
              <span
                class="ellipsis numberMoney"
              >
              {{scope.row.sales_num || '--'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="效期要求" align="center" width="100">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.expire_date || '--'}}
             </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {FieldFormat} from "/@/utils/utils";
import {orderList} from "/@/api/dms/order";
import {customerOrderInfo} from "/@/api/dms/customerOrder";
import {ElMessage} from "element-plus";
import {orderGroupInfo} from "/@/api/dms/order/group";
import router from "/@/router";

defineOptions({
    name: 'Retrieval',
  })
const route:any = useRoute()
const orderPath:any = ref(localStorage.getItem('orderPath'))
const orderPath2:any = ref(localStorage.getItem('orderPath2'))
// ***********
const arr_approve = ref([
  { title: '客户需求', active: true, path:`/order/treatment?path=${route.query.path}&id=${route.query.order}`},
  { title: '销售订单', active: true, path:`/order/addOrder?path=${route.query.path}&id=${route.query.id}&order=${route.query.order}` },
  { title: '销售出库单', active: true, path:`/order/retrieval?path=${route.query.path}&id=${route.query.id}&order=${route.query.order || 0}` },
  { title: '快递运输', active: false, path:`/order/expressCompany?path=${route.query.path}&id=${route.query.id}&order=${route.query.order || 0}` },
  { title: '收货确认', active: false,path:`/order/receipt?path=${route.query.path}&id=${route.query.id}&order=${route.query.order || 0}` },
])
const arr_approve1 = ref( [
  { title: '销售订单', active: true,path:`/order/addOrder?path=${route.query.path}&id=${route.query.id}`},
  { title: '销售出库单', active: true,path:`/order/retrieval?path=${route.query.path}&id=${route.query.id}&order=${route.query.order}` },
  { title: '快递运输', active: false,path:`/order/expressCompany?path=${route.query.path}&id=${route.query.id}` },
  { title: '收货确认', active: false,path:`/order/receipt?path=${route.query.path}&id=${route.query.id}` },
])
const _FieldFormat = (value: string, type = '') => {
  return FieldFormat(value, type)
}

const loading = ref<boolean>(false)
const detailLoading = ref<boolean>(false)
const detailList = ref<any>()
const customer_order_list = ref<any>([])
const singleTableRef = ref<any>(undefined)
const handleCurrentChange =(va:any,i:any)=>{
  if(i == null) return
  detailList.value = va
}
//获取列表
// const getOrderList =(id:any)=>{
//   loading.value = true
//   orderList({page:1,pagesize:2000,order_group_uid:route.query.id}).then((data:any)=>{
//     if(data.code == 200){
//       loading.value = false
//       customer_order_list.value = data.data.list
//     }
//   })
// }
const title=(va:any)=>{
  if(va == 2){
    return '寄售订单'
  }else{
    return '销售订单详情'
  }
}
// 客户端
const customerListInFo = ref<any>(undefined)
const getCustomerInfo = ()=>{
  if( route.query.order &&  route.query.path ==1 ||  route.query.path ==2){
    loading.value = true
    customerOrderInfo({order_no:route.query.order}).then((data:any)=>{
      if(data.code == 200){
        loading.value = false
        customer_order_list.value = data.data.stock_out
        detailList.value = data.data.stock_out[0]
        singleTableRef.value!.setCurrentRow( data.data.stock_out[0])
        customerListInFo.value = data.data
        if(data.data.is_express){
          arr_approve.value = [
            { title: '客户需求', active: true, path:`/order/treatment?path=${route.query.path}&id=${route.query.order}`},
            { title: '销售订单', active: true, path:`/order/addOrder?path=${route.query.path}&id=${route.query.id}&order=${route.query.order}` },
            { title: '销售出库单', active: true, path:`/order/retrieval?path=${route.query.path}&id=${route.query.id}&order=${route.query.order || 0}` },
            { title: '快递运输', active: true, path:`/order/expressCompany?path=${route.query.path}&id=${route.query.id}&order=${route.query.order || 0}` },
            { title: '收货确认', active: true,path:`/order/receipt?path=${route.query.path}&id=${route.query.id}&order=${route.query.order || 0}` },
          ]
        }
      }
    })
  }else if( route.query.order &&  route.query.path !=1 ||  route.query.path !=2) {
    loading.value = true
    orderGroupInfo({uid:route.query.id}).then((data:any)=>{
      if(data.code == 200){
        customer_order_list.value = data.data.stock_out
        detailList.value =  data.data.stock_out[0]
        singleTableRef.value!.setCurrentRow( data.data.stock_out[0])
        customerListInFo.value = data.data
        if(data.data.is_express){
          arr_approve1.value = [
            { title: '销售订单', active: true,path:`/order/addOrder?path=${route.query.path}&id=${route.query.id}`},
            { title: '销售出库单', active: true,path:`/order/retrieval?path=${route.query.path}&id=${route.query.id}&order=${route.query.order}` },
            { title: '快递运输', active: true,path:`/order/expressCompany?path=${route.query.path}&id=${route.query.id}` },
            { title: '收货确认', active: true,path:`/order/receipt?path=${route.query.path}&id=${route.query.id}` },
          ]
        }
        if( data.data.type == 2){
          arr_approve1.value[1].title='直接调拨单'
        }
      }

    })
  }
}
const back = ()=>{
  if( route.query.path == 2 || route.query.path == 1) {
    if (orderPath2.value == 1) {
      router.push('/order/customerOrder')
    } else {
      router.push('/order/orderQuery')
    }
  }else {
    if(orderPath.value == 1){
      router.push('/order/standardOrder')
    }else if(orderPath.value == 2){
      router.push('/order/consignOrder')
    }else {
      router.push('/order/orderQuery')
    }
  }
}
// 刷新
const refresh = ()=>{
  getCustomerInfo()
  ElMessage.success(`刷新成功`)
}
// 下载
const download = ()=>{
  console.log('下载')
  console.log(customerListInFo.value,'444')
}
onMounted(()=>{
  getCustomerInfo()
})
</script>

<style lang="scss" scoped>
@import "../../index";
</style>

